<template>
  <div>
    <div class="btn-row">
      <el-date-picker
        format="yyyy年MM月"
        value-format="yyyy年MM月"
        v-model="month"
        type="month"
        placeholder="选择月"
      ></el-date-picker>
      <el-button type="primary" class="download" @click="download">下载报表</el-button>
    </div>
    <el-tabs type="border-card" v-model="tabName">
      <el-tab-pane label="专项统计表" name="table1">
        <tab1 :month="month"></tab1>
      </el-tab-pane>
      <el-tab-pane label="分机构-当月" name="table2">
        <tab2 :month="month"></tab2>
      </el-tab-pane>
      <el-tab-pane label="分机构-累计" name="table3">
        <tab3 :month="month"></tab3>
      </el-tab-pane>
      <el-tab-pane label="占比情况" name="table4"></el-tab-pane>
      <el-tab-pane label="分县域" name="table5">
        <tab5 :month="month"></tab5>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  Button,
  DatePicker,
  Tabs,
  TabPane,
  Table,
  TableColumn
} from "element-ui";
import Tab1 from "./components/Tab1";
import Tab2 from "./components/Tab2";
import Tab3 from "./components/Tab3";
import Tab5 from "./components/Tab5";

import { downloadReport } from "@/api/first-loan.js";

export default {
  name: "first-loan-table",
  components: {
    [DatePicker.name]: DatePicker,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    Tab1,
    Tab2,
    Tab3,
    Tab5
  },
  data() {
    return {
      month: null,
      tabName: "table1"
    };
  },
  methods: {
    download() {
      if (this.month == null || this.month == "") {
        this.$alert("请选择月份");
        return;
      }
      let loading = this.$loading({
        lock: true,
        text: "努力校验中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      downloadReport(this.month)
        .then(res => {
          loading.close();
          let data = res.data;
          if (data.type === "application/json") {
            let data = res.data;
            new Blob([data])
              .text()
              .then(text => {
                let json = JSON.parse(text);
                console.log(json.msg);
                this.$alert(json.msg);
                return;
              })
              .catch(errMsg => {
                return;
              });
          }
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          let filename = res.headers["content-disposition"].split(
            "fileName="
          )[1];
          link.setAttribute("download", filename);

          document.body.appendChild(link);
          link.click();
        })
        .catch(errMsg => {
          loading.close();
          this.$alert(`导出错误${errMsg}`);
        });
    }
  }
};
</script>
<style lang="stylus" scoped>
.btn-row {
  height: 50px;
  padding-top: 5px;

  .download {
    margin-left: 5px;
  }
}
</style>